<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { Chart, registerables } from 'chart.js'

// 注册Chart.js组件
Chart.register(...registerables)

// 活跃度过滤
const activeFilter = ref('month')

// 创作排名过滤
const rankingFilter = ref('projects')

// 用户活跃度数据
const activeUserData = reactive({
  daily: {
    count: '2,458',
    growth: '12%',
    labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    data: [30, 28, 32, 25, 27, 20, 22]
  },
  weekly: {
    count: '8,742',
    growth: '8%',
    labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    data: [25, 28, 22, 25, 20, 18, 15]
  },
  monthly: {
    count: '24,156',
    growth: '15%',
    labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    data: [30, 28, 25, 22, 20, 18, 15]
  }
})

// 用户排名数据
const userRankingData = reactive([
  {
    rank: 1,
    name: '张三',
    role: '高级开发者',
    projects: 128,
    modules: 356,
    models: 892,
    projectPercent: 95,
    modulePercent: 85,
    modelPercent: 90,
    activity: 'high'
  },
  {
    rank: 2,
    name: '李四',
    role: '资深工程师',
    projects: 112,
    modules: 298,
    models: 754,
    projectPercent: 85,
    modulePercent: 70,
    modelPercent: 75,
    activity: 'high'
  },
  {
    rank: 3,
    name: '王五',
    role: '产品设计师',
    projects: 98,
    modules: 245,
    models: 632,
    projectPercent: 75, 
    modulePercent: 60,
    modelPercent: 65,
    activity: 'high'
  },
  {
    rank: 4,
    name: '赵六',
    role: '前端开发',
    projects: 87,
    modules: 198,
    models: 521,
    projectPercent: 65,
    modulePercent: 50,
    modelPercent: 55,
    activity: 'medium'
  },
  {
    rank: 5,
    name: '孙七',
    role: '后端工程师',
    projects: 76,
    modules: 180,
    models: 480,
    projectPercent: 55,
    modulePercent: 45,
    modelPercent: 50,
    activity: 'medium'
  }
])

// 切换活跃度过滤器
const changeActiveFilter = (filter: string) => {
  activeFilter.value = filter
}

// 切换排名过滤器
const changeRankingFilter = (filter: string) => {
  rankingFilter.value = filter
}

// 创建图表的方法
const createCharts = () => {
  const dailyCtx = document.getElementById('dailyActiveChart') as HTMLCanvasElement
  const weeklyCtx = document.getElementById('weeklyActiveChart') as HTMLCanvasElement
  const monthlyCtx = document.getElementById('monthlyActiveChart') as HTMLCanvasElement
  
  if (dailyCtx && weeklyCtx && monthlyCtx) {
    // 创建日活跃用户图表
    new Chart(dailyCtx, {
      type: 'line',
      data: {
        labels: activeUserData.daily.labels,
        datasets: [{
          data: activeUserData.daily.data,
          borderColor: '#FFB74D',
          backgroundColor: 'rgba(255, 183, 77, 0.4)',
          fill: true,
          tension: 0.4
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false
          }
        },
        scales: {
          y: {
            beginAtZero: true,
            display: false
          },
          x: {
            display: false
          }
        }
      }
    })

    // 创建周活跃用户图表
    new Chart(weeklyCtx, {
      type: 'line',
      data: {
        labels: activeUserData.weekly.labels,
        datasets: [{
          data: activeUserData.weekly.data,
          borderColor: '#FFB74D',
          backgroundColor: 'rgba(255, 183, 77, 0.4)',
          fill: true,
          tension: 0.4
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false
          }
        },
        scales: {
          y: {
            beginAtZero: true,
            display: false
          },
          x: {
            display: false
          }
        }
      }
    })

    // 创建月活跃用户图表
    new Chart(monthlyCtx, {
      type: 'line',
      data: {
        labels: activeUserData.monthly.labels,
        datasets: [{
          data: activeUserData.monthly.data,
          borderColor: '#FFB74D',
          backgroundColor: 'rgba(255, 183, 77, 0.4)',
          fill: true,
          tension: 0.4
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false
          }
        },
        scales: {
          y: {
            beginAtZero: true,
            display: false
          },
          x: {
            display: false
          }
        }
      }
    })
  }
}

// 组件挂载后创建图表
onMounted(() => {
  createCharts()
})
</script>

<template>
  <div>
    <!-- 用户活跃度区域 -->
    <div class="p-6 rounded-lg border border-gray-200 bg-white shadow-sm mb-6">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-semibold">用户活跃度</h3>
        <div class="flex space-x-2">
          <button 
            class="px-3 py-1 text-xs rounded-md"
            :class="activeFilter === 'day' ? 'bg-amber-100 text-amber-500' : 'bg-gray-100 hover:bg-gray-200'"
            @click="changeActiveFilter('day')"
          >今日</button>
          <button 
            class="px-3 py-1 text-xs rounded-md"
            :class="activeFilter === 'week' ? 'bg-amber-100 text-amber-500' : 'bg-gray-100 hover:bg-gray-200'"
            @click="changeActiveFilter('week')"
          >本周</button>
          <button 
            class="px-3 py-1 text-xs rounded-md"
            :class="activeFilter === 'month' ? 'bg-amber-100 text-amber-500' : 'bg-gray-100 hover:bg-gray-200'"
            @click="changeActiveFilter('month')"
          >本月</button>
        </div>
      </div>
      
      <div class="grid grid-cols-3 gap-6 mb-6">
        <div class="p-5 rounded-lg border border-gray-200 bg-blue-50 shadow-sm">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-sm font-medium text-gray-600">日活跃用户</h3>
            <div class="w-10 h-10 rounded-full flex items-center justify-center bg-amber-100">
              <i class="fas fa-user-clock text-amber-500 text-lg"></i>
            </div>
          </div>
          <p class="text-2xl font-bold text-gray-800">{{ activeUserData.daily.count }}</p>
          <div class="mt-2 flex items-center">
            <span class="text-sm text-green-500 mr-2"><i class="fas fa-arrow-up mr-1"></i>{{ activeUserData.daily.growth }}</span>
            <span class="text-xs text-gray-500">较上周</span>
          </div>
          
          <!-- 简易折线图 -->
          <div class="mt-4 h-16">
            <canvas id="dailyActiveChart"></canvas>
          </div>
        </div>
        
        <div class="p-5 rounded-lg border border-gray-200 bg-blue-50 shadow-sm">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-sm font-medium text-gray-600">周活跃用户</h3>
            <div class="w-10 h-10 rounded-full flex items-center justify-center bg-amber-100">
              <i class="fas fa-calendar-week text-amber-500 text-lg"></i>
            </div>
          </div>
          <p class="text-2xl font-bold text-gray-800">{{ activeUserData.weekly.count }}</p>
          <div class="mt-2 flex items-center">
            <span class="text-sm text-green-500 mr-2"><i class="fas fa-arrow-up mr-1"></i>{{ activeUserData.weekly.growth }}</span>
            <span class="text-xs text-gray-500">较上月</span>
          </div>
          
          <!-- 简易折线图 -->
          <div class="mt-4 h-16">
            <canvas id="weeklyActiveChart"></canvas>
          </div>
        </div>
        
        <div class="p-5 rounded-lg border border-gray-200 bg-blue-50 shadow-sm">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-sm font-medium text-gray-600">月活跃用户</h3>
            <div class="w-10 h-10 rounded-full flex items-center justify-center bg-amber-100">
              <i class="fas fa-calendar-alt text-amber-500 text-lg"></i>
            </div>
          </div>
          <p class="text-2xl font-bold text-gray-800">{{ activeUserData.monthly.count }}</p>
          <div class="mt-2 flex items-center">
            <span class="text-sm text-green-500 mr-2"><i class="fas fa-arrow-up mr-1"></i>{{ activeUserData.monthly.growth }}</span>
            <span class="text-xs text-gray-500">较上季度</span>
          </div>
          
          <!-- 简易折线图 -->
          <div class="mt-4 h-16">
            <canvas id="monthlyActiveChart"></canvas>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 用户创作内容排名 -->
    <div class="p-6 rounded-lg border border-gray-200 bg-white shadow-sm">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-semibold">用户创作内容排名</h3>
        <select 
          v-model="rankingFilter"
          class="px-3 py-1 text-sm bg-gray-100 rounded-md border-none focus:ring-2 focus:ring-amber-500"
        >
          <option value="projects">按工程数量</option>
          <option value="modules">按模块数量</option>
          <option value="models">按模型数量</option>
        </select>
      </div>
      
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead>
            <tr>
              <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">排名</th>
              <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户</th>
              <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">工程数量</th>
              <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">模块数量</th>
              <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">模型数量</th>
              <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">活跃度</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <tr v-for="user in userRankingData" :key="user.rank">
              <td class="px-6 py-4 whitespace-nowrap">
                <div 
                  :class="[
                    'flex items-center justify-center w-6 h-6 rounded-full text-white text-xs font-bold',
                    user.rank === 1 ? 'bg-amber-500' : 
                    user.rank === 2 ? 'bg-gray-300' : 
                    user.rank === 3 ? 'bg-yellow-600' : 
                    'bg-gray-200 text-gray-600'
                  ]"
                >{{ user.rank }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center mr-3">
                    <i class="fas fa-user text-gray-500"></i>
                  </div>
                  <div>
                    <div class="text-sm font-medium text-gray-900">{{ user.name }}</div>
                    <div class="text-xs text-gray-500">{{ user.role }}</div>
                  </div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900">{{ user.projects }}</div>
                <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
                  <div class="bg-amber-500 h-1.5 rounded-full" :style="{ width: user.projectPercent + '%' }"></div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900">{{ user.modules }}</div>
                <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
                  <div class="bg-amber-500 h-1.5 rounded-full" :style="{ width: user.modulePercent + '%' }"></div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900">{{ user.models }}</div>
                <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
                  <div class="bg-amber-500 h-1.5 rounded-full" :style="{ width: user.modelPercent + '%' }"></div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span 
                  :class="[
                    'px-2 inline-flex text-xs leading-5 font-semibold rounded-full', 
                    user.activity === 'high' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
                  ]"
                >
                  {{ user.activity === 'high' ? '高' : '中' }}
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<style scoped>
.text-amber-500 {
  color: #f59e0b;
}
.bg-amber-100 {
  background-color: #fef3c7;
}
.bg-blue-50 {
  background-color: #f2f7fc;
}
</style> 